<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue-2.5.21.js"></script>
    <style>
        #root {
            margin: 0 auto;
        }

        input {
            border-radius: 30px;
            border: 1px solid gray;
            background-color: rgba(128, 128, 128, 0.123);
        }

        .searchbox {
            margin: 8px;

        }

        .searchbox span {
            color: #46f5ff;
            margin: 8px;

        }

        .block {
            margin: 10px;
        }

        .list {
            display: flex;
        }

        .list span {
            display: block;
            width: 120px;
            background-color: #f0f0f0;
            text-align: center;
            margin: 8px;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="searchbox">
            <input type="text" v-model="name" placeholder="搜索商家名称">
            <span @click="sousuo">搜索</span>
        </div>
        <div class="block">
            <div class="title">历史搜索</div>
            <button @click="shanchu">清空记录</button>
            <div class="list">
                <span v-for="(item,index) in searchArr">
                    {{item.name}}
                </span>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    const vm = new Vue({
        el: '#root',
        data() {
            return {
                name: "",
                searchArr: []
            }
        },
        methods: {
            sousuo() {
                if (this.name != '') {
                    this.searchArr.push({ id: '001', name: this.name });
                } else {
                    alert('请输入内容')
                }
                this.name = '';
            },
            shanchu() {
                this.searchArr = '';
            }
        },
    })
</script>